<template>
	<view class="page">
		<status-bar></status-bar>
		<view class="head-wrapper">
			<view class="icon iconfont icon-setting u-f-ajc setting" @click="gotoSetting"></view>
		</view>
		<view class="block-wrapper">
			<view class="block-background">
				<!-- 已登录 -->
				<view v-if="hasLogin" class="login-block ripple-wrapper" @click="click($event,0)">
					<view class="login-wrapper">
						<image class="head-img" :src="user.photo"></image>
						<text>{{user.name}}</text>
					</view>
					<view class="icon iconfont icon-keyboard_arrow_right u-f-ajc"></view>
					<span class="ripple" ref="btn0"></span>
				</view>
				<!-- 未登录 -->
				<view v-else class="block ripple-wrapper" @click="click($event,0)">
					<view class="head-text">登录科成拍卖平台，共创美好校园</view>
					<!-- 第三方登录 -->
					<view class="other-login u-f-ajc">
						<view class="u-f1 u-f-ajc">
							<view class="icon iconfont icon-shouji u-f-ajc"></view>
						</view>
						<view class="u-f1 u-f-ajc">
							<view class="icon iconfont icon-weixin u-f-ajc"></view>
						</view>
						<view class="u-f1 u-f-ajc">
							<view class="icon iconfont icon-qq u-f-ajc"></view>
						</view>
						<view class="u-f1 u-f-ajc">
							<view class="icon iconfont icon-weibo u-f-ajc"></view>
						</view>
					</view>
					<!-- 账号密码登陆 -->
					<view class="u-f-ajc" style="margin-top: 10rpx;">账号密码登录<view class="icon iconfont icon-ic_arrow_r"></view>
					</view>
					<span class="ripple" ref="btn0"></span>
				</view>
			</view>
			<view class="user-action" :style="style">
				<view class="user-action-block ripple-wrapper" @click="click($event,1)">
					<view class="user-action-wrapper u-f-ajc">
						<view class="u-f1 u-f-ajc">
							<view class="icon iconfont icon-paimai u-f-ajc"></view>
						</view>
					</view>
					<view class="user-action-text">我的拍卖</view>
					<span class="ripple" ref="btn1"></span>
				</view>
				<view class="user-action-block ripple-wrapper" @click="click($event,2)">
					<view class="user-action-wrapper u-f-ajc">
						<view class="u-f1 u-f-ajc">
							<view class="icon iconfont icon-shoucang u-f-ajc"></view>
						</view>
					</view>
					<view class="user-action-text">我的收藏</view>
					<span class="ripple show" ref="btn2"></span>
				</view>
				<view class="user-action-block ripple-wrapper" @click="click($event,3)">
					<view class="user-action-wrapper u-f-ajc">
						<view class="u-f1 u-f-ajc">
							<view class="icon material-icons icon-canyu u-f-ajc"></view>
						</view>
					</view>
					<view class="user-action-text">参与的拍卖</view>
					<span class="ripple show" ref="btn3"></span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/*引入手机状态栏留空组件*/
	import statusBar from "@/components/status-bar/status-bar.vue"
	export default {
		components: {
			statusBar
		},
		data() {
			return {
				style: "",
				user: {
					uid: '',
					name: '',
					phone: '',
					email: '',
					gender: '',
					qq: '',
					photo: ''
				},
				hasLogin: false
			}
		},
		methods: {
			click(e, index) {
				var x = Object.values(this.$refs)
				const query = uni.createSelectorQuery();
				var rect, ripple = x[index];
				query.selectAll('.ripple-wrapper').boundingClientRect(data => {
					rect = data[index];
				}).exec();
				ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
				ripple.classList.remove('show');
				var top = e.changedTouches[0].pageY - rect.top - Math.max(rect.width, rect.height) / 2 - document.body.scrollTop;
				var left = e.changedTouches[0].pageX - rect.left - Math.max(rect.width, rect.height) / 2 - document.body.scrollLeft;
				ripple.style.top = top + 'px'
				ripple.style.left = left + 'px'
				ripple.classList.add('show');
				if (index == 0) {
					if (this.$common.hasLogin) {
						setTimeout(() => {
							uni.navigateTo({
								url: '../userInfo/userInfo?uid=' + this.$common.user.uid
							})
						}, 300);
					} else {
						setTimeout(function() {
							uni.navigateTo({
								url: '../login/login?url=mine'
							})
						}, 300);
					}
					return;
				} else if (index == 1) {
					setTimeout(function() {
						uni.navigateTo({
							url: 'myLot/myLot'
						})
					}, 300);
				} else if (index == 2) {
					setTimeout(function() {
						uni.navigateTo({
							url: 'myCollection/myCollection'
						})
					}, 300);
				} else if (index == 3) {
					setTimeout(function() {
						uni.navigateTo({
							url: 'participatingAuction/participatingAuction'
						})
					}, 300);
				}
			},
			gotoSetting() {
				uni.navigateTo({
					url: '../setting/setting'
				})
			}
		},
		onShow() {
			this.$common.setPagePath(this.$mp.page.route)
			this.hasLogin = this.$common.hasLogin;
			if (this.$common.hasLogin) {
				this.style = "margin: 0 20rpx; position: relative; top: -140rpx;"
				this.user = this.$common.user;
			} else {
				this.style = ""
			}
		},
		onHide() {
			var x = Object.values(this.$refs);
			for (let i = 0; i < x.length; i++) {
				x[i].classList.remove('show');
			}
		}
	}
</script>

<style lang="scss">
	@import url("mine.css");

	/deep/ .cl-list {
		background: none;

		&__label {
			font-size: 20px;
			color: #FFFFFF;
		}
	}

	/deep/ .cl-list:hover {
		background: none;
	}

	.cl-icon-arrow-right {
		font-size: 20px;
		color: #FFFFFF;
	}
</style>
